<template>
  <div id="home">
    <!--    导航条-->
    <nav-bar class="home-title">
      <div slot="center">购物街</div>
    </nav-bar>
    <tab-cotrol ref="tabCrotorl1" class="tabcotrol" v-show="isShowTab" :titles="['流行','新款','精选']" @tabClick="tabClick"/>
    <Scroll
      class="BsContent"
      ref="scroll"
      :probeType="3"
      @scroll='scrollContent'
      @pullingUp="loadMore"
    >
      <!--    轮播-->
      <home-swiper :banners="banner" @swiperImgLoad="swiperImgLoad"></home-swiper>
      <!--    recomend-->
      <home-rec :recommends="recommend"/>
      <home-feature/>
      <!--    tab-cotrol-->
      <tab-cotrol ref="tabCrotorl" class="tab-cotrol" :titles="['流行','新款','精选']" @tabClick="tabClick"/>
      <goods-list :goods="goodsList"/>
    </Scroll>
    <!--    监听组件的点击事件 需用修饰符.native-->
    <back-top @click.native="backTopClick" v-if="isShowBack"/>
  </div>
</template>

<script>
import NavBar from "@/components/common/navbar/NavBar";
import HomeSwiper from "./homeComps/HomeSwiper"
import HomeRec from './homeComps/HomeRec.vue';
import HomeFeature from './homeComps/HomeFeature'
import GoodsList from "@/components/goodslist/GoodsList";
import TabCotrol from '../../components/TabCotrol.vue';
import Scroll from "@/components/common/scroll/Scroll";
import BackTop from "@/components/backTop/BackTop";
import {gethomedata, gethomegoods} from '@/network/home'


export default {
  name: "Home",
  data() {
    return {
      // 轮播
      banner: [],
      recommend: [],
      // tab标题数据
      titles: [],
      // 首页商品数据
      goods: {
        'pop': {'page': 0, list: []},
        'new': {'page': 0, list: []},
        'sell': {'page': 0, list: []}
      },
      // 标记当前tab数据类型
      currentType: 'pop',
      isShowBack: false,
      isShowTab: false,
      tabOffsetTop: 0,
      scrollY: 0
    };
  },
  components: {
    NavBar,
    HomeSwiper,
    HomeRec,
    HomeFeature,
    TabCotrol,
    GoodsList,
    Scroll,
    BackTop
  },
  methods: {
    /*
    * 获取首页数据
    * */
    async getHomeData() {
      let res = await gethomedata();
      this.banner = res.data.banner.list;
      this.recommend = res.data.recommend.list
    },
    /*
    * 根据类型获取首页商品数据
    * */
    async getHomeGoods(type) {
      let page = this.goods[type].page + 1
      let res = await gethomegoods(type, page)
      this.goods[type].list.push(...res.data.list)
      this.goods[type].page += 1
      this.$refs.scroll.scrollUpFinish()
    },
    /*
    * 监听子组件点击事件
    * */
    tabClick(index) {
      switch (index) {
        case 0:
          this.currentType = 'pop'
          break
        case 1:
          this.currentType = 'new'
          break
        case 2:
          this.currentType = 'sell'
          break
      }
      this.$refs.tabCrotorl1.currentIndex = index
      this.$refs.tabCrotorl.currentIndex = index
    },
    backTopClick() {
      // 调用scroll组件中的scrollToTop方法
      this.$refs.scroll.scrollToTop(0, 0)
    },
    scrollContent(position) {
      this.isShowBack = (-position.y) > 1000
      this.isShowTab = (-position.y) > this.tabOffsetTop
    },
    loadMore() {
      console.log('上拉加载更多');
      this.getHomeGoods(this.currentType)

    },
    // 防抖函数
    debounce(func, delay) {
      let timer = null
      return function (...args) {
        if (timer) clearTimeout(timer)
        timer = setTimeout(() => {
          func.apply(this, args)
        }, delay)
      }
    },
    swiperImgLoad() {
      this.tabOffsetTop = this.$refs.tabCrotorl.$el.offsetTop
    }
  },
  created() {
    this.getHomeData()
    this.getHomeGoods('pop')
    this.getHomeGoods('sell')
    this.getHomeGoods('new')
  },
  mounted() {
    const refresh = this.debounce(this.$refs.scroll.scrollRefresh, 200)
    // 使用事件总线监听item里面图片加载
    this.$bus.$on('itemImgLoad', () => {
      // 数据加载完重新计算滚动长度
      refresh()
      // this.$refs.scroll.scroll.refresh()
    })
  },
  // 加了<keep-alive><keep-alive/>时destroyed不生效
  destroyed() {
    console.log('111')
  },
  // 只有在路由显示的router-view 外加了<keep-alive><keep-alive/>时 activated 和deactivated才生效
  activated() {
    // 活动的页面
    console.log('-----')
    this.$refs.scroll.scrollToTop(0, this.scrollY, 0)
    this.$refs.scroll.scrollRefresh()
  },
  deactivated() {
    console.log(this.$refs.scroll.getScrollY())
    this.scrollY = this.$refs.scroll.getScrollY()

  },
  computed: {
    goodsList() {
      return this.goods[this.currentType].list
    }
  }

};
</script>


<style scoped>
#home {
  height: 100vh;
  position: relative;
}

.home-title {
  background-color: var(--color-tint);
  color: #fff;
}

.tab-cotrol {

}

/*.BsContent {*/
/*  height: calc(100% - 93px);*/
/*  overflow: hidden;*/
/*  margin-top: 44px;*/
/*}*/
.BsContent {
  position: absolute;
  top: 44px;
  bottom: 49px;
  left: 0;
  right: 0;
  overflow: hidden;
}

.tabcotrol {
  position: relative;
}
</style>
